<template>
  <div class="search">
    <span style="margin-top: 20px; margin-left: 15px">
      浪高警戒值：<el-input
        v-model="WarnInput"
        style="width: 240px"
        :disabled="!isEditing"
        placeholder="请输入警戒值"
      />
    </span>
    <span style="margin-top: 20px; margin-left: 15px">
      <el-button
        v-if="!isEditing"
        type="primary"
        @click="changeNum"
        style="margin-left: 15px"
        >更改</el-button
      >
      <el-button
        v-else
        type="warning"
        @click="okEditing"
        style="margin-left: 15px"
        >确定</el-button
      >
      <el-button type="primary" style="margin-left: 15px">保存</el-button>
    </span>
  </div>
  <div>
    <!-- <div ref="chartRef" style="width: 900px; height: 500px"></div> -->
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, ref, onUnmounted, nextTick } from "vue";
import {
  getTideMonth,
  getTide24,
  getWarning,
  seriesQueries,
} from "../../network/net.js";
import { formatTime } from "../../utils/cTime.js";

const chartRef = ref(null);
const WarnInput = ref("");
const isEditing = ref(false);
const chartInstance = ref(null);

window.addEventListener("resize", () => {
  if (chartInstance.value) {
    chartInstance.value.resize();
  }
});

const changeNum = () => {
  isEditing.value = true;
};
const okEditing = () => {
  // 退出编辑模式
  isEditing.value = false;
  warningValue = WarnInput.value;
  let option = chartDataObj.getOption();
  option.series[0].markLine.data[0].yAxis = warningValue;
  chartDataObj.setOption(option);
};
let token = sessionStorage.getItem("token");
const tableTideData = ref([]);
const getChDate = (date) => {
  // 返回格式07月01日 16时
  let month = date.slice(5, 7);
  let day = date.slice(8, 10);
  let hour = date.slice(11, 13);
  return month + "月" + day + "日 " + hour + "时";
};
let arr1 = [];
let timeArr1 = [];
let valueArr1 = [];
// const getData = () => {
//   getTide24(token).then((res) => {
//     tableTideData.value = res.data.data.map((item) => {
//       return {
//         forecastTime: getChDate(formatTime(item.time)),
//         tide: Math.round(item.tideValue * 100),
//       };
//     });
//     res.data.data.forEach((item, index) => {
//       timeArr1.push(getChDate(formatTime(item.time)));
//       valueArr1.push(Math.round(item.tideValue * 100));
//     });
//     nextTick(() => {
//       initChart(timeArr1, valueArr1);
//       getWarningValue();
//     });
//   });
// };
let warningValue = 410;
let chartDataObj = null;
// const initChart = (xAxisData, seriesData) => {
//   // chartRef.value
//   // document.getElementById("tide_chart_container")
//   chartDataObj = echarts.init(chartRef.value);
//   let option = {
//     grid: { top: "40", left: "40", bottom: "40", right: "40" },
//     xAxis: {
//       type: "category",
//       data: xAxisData,
//     },
//     yAxis: {
//       type: "value",
//     },
//     series: [
//       {
//         data: seriesData,
//         type: "line",
//         smooth: true,
//         markLine: {
//           data: [
//             {
//               yAxis: warningValue,
//               name: "Avg",
//               lineStyle: { color: "#FF0000", width: 1 }, // 样式： 线型、颜色、线宽}] type: 'solid',
//             },
//           ],
//         },
//       },
//     ],
//   };
//   chartDataObj.setOption(option);
// };
// const getWarningValue = () => {
//   // 获取警戒值
//   //   getWarning().then((res) => {
//   //     WarnInput.value = res.data.data.value;
//   //     warningValue = res.data.data.value;
//   //     let option = chartDataObj.getOption();
//   //     option.series[0].markLine.data[0].yAxis = warningValue;
//   //     chartDataObj.setOption(option);
//   //   });
//   //   https://xxs.dhybzx.org:3000/qsback//seriesQueries?featureType=wave&startDateTime=2024-08-16+00:00&endDateTime=2024-08-19+00:00&latitude=30.4687977564324&longitude=120.99105834960938

// //   seriesQueries(token, featureType, startDateTime, endDateTime, lat, lon);
// };
// get;
onMounted(() => {
  nextTick(() => {
    // getData();
  });
});
</script>
<style lang="less" scoped>
.search {
  width: 90vw;
  height: 6vh;
  background-color: #00000000;
  margin-left: 30px;
  margin-top: 0px;
  margin-bottom: 20px;
  display: flex;
  align-content: center;
  text-align: center;
}
</style>
